import React from 'react'
import PropTypes from 'prop-types'
export default class App extends React.Component {
  state = {
    isShow: true,
  }
  render() {
    return (
      <div>
        <h1>倒计时</h1>
        <hr />
        <hr />
        <hr />
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>卸载定时器</button>
        {this.state.isShow ? <Downtime t={20} /> : null}
        {this.state.isShow ? <Downtime t={40} /> : null}
        {/* <Downtime></Downtime> */}
      </div>
    )
  }
  componentDidMount() {
    console.log('componentDidMount钩子被执行了')
  }
}

class Downtime extends React.Component {
  static propTypes = {
    t: PropTypes.number,
  }

  static defaultProps = {
    t: 0,
  }
  state = {
    time: 0,
  }
  timerId = -1
  sendTimeHandle = () => {
    if (this.state.time !== 0) return //如果不是等于0的时候直接返回，不进行下面操作
    this.setState({ time: this.props.t || 100 })
    this.timerId = window.setInterval(() => {
      if (this.state.time === 1) {
        clearInterval(this.timerId)
      }
      console.log('定时器正在运行——————')
      this.setState({ time: this.state.time - 1 })
    }, 100)
  }
  render() {
    return (
      <div>
        <button onClick={this.sendTimeHandle}>{this.state.time === 0 ? '点击发送验证码' : this.state.time}</button>
      </div>
    )
  }
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  // cdm cwm
  // componentDidMount() {
  //   console.log('componentDidMount钩子被执行了')
  // }
}
